<template>
    <s-box title="共词分析" :span="7">
        <div class="chart-wrap" ref="chart"></div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
           nodes:[],
           edges:[],
           data2
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        delegate.$off('s-search',this._initSearch)
        delegate.$off('draw-open',this._initChart)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._initSearch)
            delegate.$on('draw-open',this._initChart)
        },
        _initSearch(obj){
            console.log(1111111111,obj)
        },
        randomColor(){  
        　　var colorStr=Math.floor((0.1+Math.random())*0xFFFFFF).toString(16).toUpperCase();  
        　　return "#"+"000000".substring(0,6-colorStr)+colorStr;  
        },
         _setChartOption(){
             let myChart = echarts.init(this.$refs.chart);
             let $this = this;
                myChart.showLoading();
                myChart.hideLoading();
                myChart.clear();
                myChart.setOption(
                {
                    animationDurationUpdate: 1500,
                    animationEasingUpdate: "quinticInOut",
                    series: [
                    {
                        type: "graph",
                        layout: "force",
                        // progressiveThreshold: 700,
                        force : { //力引导图基本配置
                            //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                            repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                            gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                            layoutAnimation : true
                        //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                        
                        },
                        data: $this.nodes,
                        draggable:true,
                        edges: $this.edges,
                        symbolSize: 30,  
                        label: {
                        show:true,
                        emphasis: {
                            position: "inside",
                            show: true
                        }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.3
                        }
                    }
                    ]
                },
                true
                );
         },
        _getCoWordAnalysisData(){
            this.nodes = [];
            this.edges = [];
            if(!this.navCurrentId) return;
                    this.api({
                            url: "newtechanalyse/coWordAnalysis",
                            method: "post",
                            data:`topicId=${this.navCurrentId}`
                    }).then(data => {
                        let $this = this;
                        data.nodes.map(function(node) {
                            var datanode = {
                                // x: parseInt(Math.random()*800),
                                // y: parseInt(Math.random()*800),
                                id: node.id + '',
                                name: node.label,
                                symbolSize: 25,
                                itemStyle: {
                                normal: {
                                    color: $this.randomColor()
                                }
                                }
                            };
                            $this.nodes.push(datanode);
                        });

                        data.edges.map(function(edge) {
                            var dataedge =  {
                                source: edge.sourceID + '',
                                target: edge.targetID + '',
                                lineStyle:{
                                    width: edge.size*2 > 12 ?  12 : edge.size*2
                                }
                            };
                             $this.edges.push(dataedge);
                        });
                        console.log($this.nodes);
                        console.log($this.edges);
                        this._setChartOption();
                    })
        },
        _initChart(bool) {
            if(!bool) return;
            this.chart();
        },
        chart(){
             this.$nextTick(() => {
                this._setChartOption();
            });
            this._getCoWordAnalysisData();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-wrap{
      width: 100%;
      height: 416px;
  }
</style>
